<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue3响应式学习</title>
	</head>
	<body>
		<div id="app"></div>
		<button id="btn">点击事件</button>
		<script src="./reactivity.js"></script>
		<script type="text/javascript">
			const app = document.getElementById('app')
			const btn = document.getElementById('btn')
			
			const testobj = {
				num: 1,
				name: 'vue3',
				desc: 'vue新版本'
			}
			
			let obj = reactive(testobj)
			
			let double = computed(() => obj.num*4)
			
			effect(() => {
				app.innerHTML = `<p>${obj.name}-${obj.desc}--${double.value}</p>`
			})
			
			btn.addEventListener('click', ()=>{
				obj.desc = obj.desc + 'vue3'
				obj.num = obj.num * 2
			},false)
		</script>
	</body>
</html>
